<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item - Reorder</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Item Reorder</ion-title>
          <ion-buttons slot="primary">
            <ion-button onclick="toggle()">Edit</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content id="content">
        <ion-list>
          <ion-reorder-group id="reorderGroup"></ion-reorder-group>
        </ion-list>

        <ion-list>
          <ion-list-header>
            <ion-label> Start </ion-label>
          </ion-list-header>
          <ion-reorder-group id="startGroup"></ion-reorder-group>
        </ion-list>

        <ion-list>
          <ion-list-header>
            <ion-label> End </ion-label>
          </ion-list-header>
          <ion-reorder-group id="endGroup"></ion-reorder-group>
        </ion-list>
      </ion-content>
    </ion-app>

    <style>
      .item {
        background-color: inherit;
      }
    </style>

    <script>
      var isReordering = false;
      var groups = [
        {
          id: 'reorderGroup',
          sliding: false,
        },
        {
          id: 'startGroup',
          sliding: true,
          side: 'start',
        },
        {
          id: 'endGroup',
          sliding: true,
          side: 'end',
        },
      ];
      for (var i = 0; i < groups.length; i++) {
        initGroup(groups[i]);
      }
      function clickedButton(number) {
        console.log('clicked', number);
      }
      function toggle() {
        isReordering = !isReordering;
        for (var i = 0; i < groups.length; i++) {
          var groupEl = document.getElementById(groups[i].id);
          groupEl.disabled = !isReordering;
        }
      }
      function initGroup(group) {
        var groupEl = document.getElementById(group.id);
        groupEl.addEventListener('ionItemReorder', function (ev) {
          ev.detail.complete();
        });
        var groupItems = [];
        for (var i = 0; i < 5; i++) {
          groupItems.push(i);
        }
        if (group.sliding) {
          groupEl.side = group.side;
          renderSlidingGroup(group, groupEl, groupItems);
        } else {
          renderGroup(groupEl, groupItems);
        }
      }
      function renderGroup(groupEl, items) {
        let innerHTML = '';
        for (var i = 0; i < items.length; i++) {
          const index = items[i];
          innerHTML += `
          <ion-item onClick="clickedButton(${index})"
            style="min-height: ${index * 2 + 35}px; --background: rgb(${255 - index * 4}, ${255 - index * 4}, ${
            255 - index * 4
          })">${index}<ion-reorder slot="end"></ion-reorder></ion-item>`;
        }
        groupEl.innerHTML = innerHTML;
      }
      function renderSlidingGroup(group, groupEl, items) {
        let innerHTML = '';
        for (var i = 0; i < items.length; i++) {
          innerHTML += `
          <ion-item-sliding>
            <ion-item onclick="clickedButton(${i})">
              <ion-reorder slot="${group.side}"></ion-reorder>
              <ion-label>
                <h2>Sliding item ${i}</h2>
              </ion-label>
              <div slot="end">right</div>
            </ion-item>
            <ion-item-options side="end">
              <ion-item-option color="danger">
                <ion-icon name="trash" slot="start"></ion-icon>
                Remove
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>`;
        }
        groupEl.innerHTML = innerHTML;
      }
    </script>
  </body>
</html>
